<template>
    <div class="topic_detail">
      <!-- 头部 -->
      <div class="container">
        <div class="header">
          <div class="left">
            <a @click="goback"><i></i></a>
            {{obj.tittle}}
          </div>
          <div class="right">
            <router-link  to="/" class="home"></router-link>
            <router-link  to="/user" class="user"> </router-link>
            <router-link  to="/search" class="search"></router-link>
          </div>
        </div>
  
        <!-- 排行榜的分类标签 -->
        <div class="topic_label">
          <div class="label_one">
            
            <div class="label_two">
              <span  @click="clickone(item.id)" v-for="(item,index) in obj.one" :key="index"  :class="obj.oneindex === item.id ? 'con':''">{{item.name}}</span>
              <!-- <span >男频文创</span> -->
            </div>
          </div>
  
          <div class="label_one">
        
            <div class="label_two">
              <span :class="obj.twoindex === index ? 'con':''" @click="clicktwo(item.id)"  v-for="(item,index) in obj.two" :key="index">{{item.name}}</span>
              <!-- <span>完结</span>
              <span>连载</span>
              <span>3日内更新</span>
              <span>7日内更新</span> -->
            </div>
          </div>
  
          <div class="label_one">
         
            <div class="label_two">
              <span @click="clickthree(item.id)" :class="obj.threeindex === index ? 'con':''" v-for="(item,index) in obj.three"  :key="index">{{item.name}}</span>
              <!-- <span>30万字以下</span>
              <span>30-100万字</span>
              <span>100-200万字以上</span> -->
            </div>
          </div>
          <div class="label_default">
        
            <div class="default_two">
              <span @click="clickfour(item.id)" v-for="(item,index) in obj.four" :class="obj.fourindex === index ? 'con':''" :key="index">{{item.name}}</span>
              <!-- <span>周人气</span>
              <span>周银票</span>
              <span>最近更新</span>
              <span>最新发布</span> -->
            </div>
          </div>
        </div>
        <div class="dividerLine"></div>
        <!-- 排行榜列表 -->
        <div class="topic_item"  v-for="(item,index) in obj.topic_data" :key="index">
          <div class="topic_item_list" @click="bookjump(item.bookId,item.title)">
            <div class="img">
              <img :src="item.cover" @error.once="useDefaultImage" alt="" />
            </div>
            <div class="topic_item_text">
              <h2>{{ item.title }}</h2>
              <p>{{ item.summary }}</p>
              <span
                >{{ item.author }}<i>&nbsp;·</i><em>{{ item.category }}</em></span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { useRoute, useRouter } from 'vue-router';
  import {getsearch} from "../api/proxy/newhome.js";
  import {reactive} from "vue";
  import { getindex_lists } from "../api/home.js";
  export default {
    setup() {
  
      let router = useRouter()
      // let first = ["全部","男频文创"]
  
      let route = useRoute()
  
      console.log("打印",route.query.id)
  
      let obj = reactive({
        one: [
          {
            name:"全部",
            id:0,
          },
          {
            name:"女频文学",
            id:2,
          },
        ],
        two:[
          {
            name:"全部",
            id:0
          },
          {
            name:"完结",
            id:1
          },
          {
            name:"连载",
            id:2
          },
          {
            name:"3日内更新",
            id:3
          },
          {
            name:"7日内更新",
            id:4
          },
     
        ],
        three:[
          {
            name:"30万字以下",
            id:0
          },
          {
            name:"30-50万字",
            id:1
          },
          {
            name:"50-100万字",
            id:2
          },
          {
            name:"100万字以上",
            id:3
          },
       
        ],
        four:[
          {
            name:"全部",
            id:0
          },
          {
            name:"完结",
            id:1
          },
          {
            name:"连载",
            id:2
          }
        ],
  
        tittle:route.query.id,
        index_lists1:null,
  
  
  
        topic_data:null,   
        oneindex:0,  //下标
        twoindex:0 , //下标
      threeindex:0 , //下标
      fourindex:0 , //下标
        
      })
  
      // 返回
      let goback=()=>{
          router.back()
      }
  
  
      // 完结与连载状态切换
      let clickfour=(e)=>{
        getsearch({bookStatus:e}).then((data)=>{
        console.log(data.data.books)
        obj.topic_data = data.data.books
        
        
      })
  
      obj.fourindex = e
      }
  
  
      //字数类型
      let clickthree=(e)=>{
        getsearch({wordCount:e}).then((data)=>{
        console.log(data.data.books)
        obj.topic_data = data.data.books
        
        
      })
  
      obj.threeindex = e
      }
  
  
    
  
  // 全部与男频文学类型切换 
     let clickone=(e)=>{
      getsearch({channel:e}).then((data)=>{
        console.log(data.data.books)
        obj.topic_data = data.data.books
        
        
      })
      obj.oneindex = e
      console.log("点击",e)
     }
  
  
    //  完结和连载时间类型切换
    let clicktwo = (e)=>{
      getsearch({sort:e}).then((data)=>{
        // console.log(data.data.books)
        obj.topic_data = data.data.books
        // console.log("Ss",obj.topic_data)
      })
  
      obj.twoindex = e
    }
  
  
  
  
  
    //  获取列表数据内容
     getsearch({channel:2}).then((data)=>{
        // console.log(data.data.books)
        obj.topic_data = data.data.books
        // console.log("Ss",obj.topic_data)
      })



      //书本跳转
      let bookjump = (id,name)=>{
    console.log(id,name);
    router.push({
      path:"/detail",
      query:{
        id:id,
        name:name
      }
    })
   }


  //  获取加载不出的图片的数据
   getindex_lists().then((data) => {
      obj.index_lists1 = data.index_lists1;
      console.log(obj.index_lists1.taduwx);
    });


   //  图片加载失败 添加默认图片
   let useDefaultImage = (event) => {
            event.target.src = obj.index_lists1.taduwx;
        }
  
  
  
  
  
  
  
      return {
          goback,
          obj,
          clickone,
          clicktwo,
          clickthree,
          clickfour,
          bookjump,
          useDefaultImage
      };
  
      
  
  
    },
  };
  </script>
  
  <style lang="scss" scoped>
  
  @import "../assets/css/mobliebase.css";
  .topic_detail {
    .dividerLine {
      background: #f5f7f9;
      height: 9px;
    }
    .header {
      padding-left: 16px;
      padding-right: 17px;
      display: flex;
      justify-content: space-between;
      border-bottom: 0.5px solid rgba(204, 212, 227, 0.5);
      box-sizing: border-box;
      background-color: #fff;
      .left {
        color: #313131;
        font-size: 18px;
        height: 48px;
        line-height: 48px;
        i {
          background: url(../assets/img/jingling.png) no-repeat;
          background-position: -71px -5px;
          width: 10px;
          height: 20px;
          display: inline-block;
          background-size: 86px;
          position: relative;
          top: 3px;
          margin-right: 10px;
        }
      }
    }
    .right {
      .home {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-position: -5px -5px;
        background: url(../assets/img/jingling.png) no-repeat;
        background-size: 77px;
        margin: 15px 0 0 20px;
        margin-top: 13px;
      }
      .user {
        display: inline-block;
        background: url(../assets/img/jingling.png) no-repeat;
        background-size: 83px;
        width: 23px;
        height: 20px;
        background-position: -36px -6px;
        margin: 15px 0 0 20px;
        margin-top: 13px;
      }
      .search {
        display: inline-block;
        background: url(../assets/img/jingling.png) no-repeat;
        background-size: 83px;
        width: 21px;
        height: 20px;
        background-position: -36px -38px;
        margin: 15px 0 0 20px;
        margin-top: 13px;
      }
    }
    /* .right .home{
      display: inline-block;
      width: 54px;
      height: 54px;
      background-position: -16px -16px;
      background: url(../assets/img/jingling.png) no-repeat;
      margin: 15px 0 0 20px;
      margin-top: 13px;
  } */
  
    .topic_label {
      padding: 8px 0;
      background-color: #fff;
      box-sizing: border-box;
      /* padding-top: 13px; */
    }
    .topic_label .label_one {
      height: 31px;
      line-height: 31px;
      position: relative;
    }
    .topic_label .label_one > span {
      font-size: 14px;
      position: absolute;
      top: 0;
      left: 0;
      margin-left: 16px;
    }
    .topic_label .label_one .con {
      color: #953a00;
    }
    .topic_label .label_one .label_two {
      display: inline-block;
      // padding-left: 50px;
    }
    .topic_label .label_one .label_two > span {
      font-size: 14px;
      margin-left: 16px;
    }
  
    .topic_label .label_default {
      height: 31px;
      line-height: 31px;
      position: relative;
    }
    .topic_label .label_default > span {
      font-size: 14px;
      position: absolute;
      top: 0;
      left: 0;
      margin-left: 16px;
    }
    .topic_label .label_default .con {
      color: #953a00;
    }
    .topic_label .label_default .default_two {
      display: inline-block;
      // padding-left: 50px;
    }
    .topic_label .label_default .default_two > span {
      font-size: 14px;
      margin-left: 16px;
    }
  
    .topic_item {
      width: 100%;
      box-sizing: border-box;
      padding: 0 21px;
      padding-top: 16px;
      background-color: #ffff;
    }
  
    .topic_item_list {
      display: flex;
    }
    .topic_item .img {
      border-radius: 4px;
      overflow: hidden;
      margin-right: 8px;
    }
    .topic_item .img img {
      width: 68px;
      height: 92px;
    }
  
    .topic_item .topic_item_text {
      width: 78%;
    }
    .topic_item .topic_item_text h2 {
      color: #2e3033;
      font-size: 15px;
      margin-top: 2px;
    }
    .topic_item .topic_item_text p {
      color: #8a8f99;
      font-size: 13px;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 4px;
      margin-bottom: 8px;
    }
  
    .topic_item .topic_item_text span {
      color: #8a8f99;
      font-size: 13px;
    }
    .topic_item .topic_item_text span i {
      font-style: normal;
    }
    .topic_item .topic_item_text span em {
      font-style: normal;
    }
    .topic_item .topic_item_text span em::after {
      content: "";
      display: inline-block;
      background: url(../assets/img/grain.jfif) no-repeat center center;
      background-size: 100%;
      height: 12px;
      width: 43px;
      margin-left: 4px;
    }
  }
  </style>